<!DOCTYPE HTML>
<script src='../../../resources/gesture-util.js'></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../virtual/percent-based-scrolling/resources/percent-based-util.js"></script>
<style>
  body {
    margin: 0px;
    height: 1000px;
    width: 1000px;
  }
  #div {
    background-color: #84BE6A;
    height: 500px;
    width: 500px;
    overflow: scroll;
  }
  #content {
    height: 800px;
    width: 800px;
  }
</style>

<div id="div" style="will-change:transform; position:relative;">
  <div id="content"> </div>
</div>

<script>
var div = document.getElementById('div');
var rect = div.getBoundingClientRect();
const GESTURE_SOURCE_TYPE = GestureSourceType.MOUSE_INPUT;

function changeStyleToScrollOnMain() {
  if(div.scrollTop > 100)
    div.style = "border-radius:40px; position:fixed;";
}
div.addEventListener("wheel", changeStyleToScrollOnMain, {passive: true});

promise_test(async () => {
  const expectedScrollY = 500;
  const pixelsToScrollY = calculatePixelsToScroll(div, 0, expectedScrollY).y;
  const x = (rect.left + rect.right) / 2;
  const y = (rect.top + rect.bottom) / 2;
  await smoothScroll(
    pixelsToScrollY, x, y, GESTURE_SOURCE_TYPE, 'down', SPEED_INSTANT
  );
  await waitForAnimationEndTimeBased(() => {
    return div.scrollTop;
  });
  assert_equals(div.scrollTop, div.scrollHeight - div.clientHeight,
    "div must be fully scrolled"
  );
}, "Scroller should continue to scroll when MT takes over scroll handling.");

</script>
